<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #333;
        }

        .box {
            width: 300px;
            height: 440px;
            background-color: yellow;
            margin: 100px auto;
        }

        .box h2 {
            line-height: 80px;
            height: 80px;
            background-color: #000000;
            color: #FFFFFF;
            text-align: center;
        }

        .box a {
            display: block;
            width: 73px;
            height: 73px;
            line-height: 73px;
            text-align: center;
            background-color: #111;
            color: #FFFFFF;
            border: 1px solid #F0F8FF;
            float: left;
            cursor: pointer;
        }

        .box a:hover {
            background-color: #333333;
            color: #FFFF00;
        }

        .box .sp {
            width: 148px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h2 id="result">0</h2>
        <a class="sp">AC</a>
        <a class="sp">/</a>
        <a>7</a>
        <a>8</a>
        <a>9</a>
        <a>X</a>
        <a>4</a>
        <a>5</a>
        <a>6</a>
        <a>-</a>
        <a>1</a>
        <a>2</a>
        <a>3</a>
        <a>+</a>
        <a>0</a>
        <a>.</a>
        <a class="sp">=</a>

        <script>
            const oAs = document.querySelectorAll('a');
            const oResult = document.querySelector('#result');
            console.log(oAs, oResult);

            let fu = '';
            let num1 = '';
            let num2 = '';
            for (let i = 0; i < oAs.length; i++) {
                oAs[i].onclick = function () {
                    console.log(oAs[i]);
                    let key_value = this.innerHTML;
                    switch (key_value) {
                        case '+':
                            fu = '+';
                            break;
                        case '-':
                            fu = '-'
                            break;
                        case 'X':
                            fu = '*';
                            break;
                        case '/':
                            fu = '/'
                            break;
                        case '=':
                            let n1 = parseFloat(num1);
                            let n2 = parseInt(num2);
                            switch (fu) {
                                case '+':
                                    oResult.innerHTML = n1 + n2;
                                    break;
                                case '-':
                                    oResult.innerHTML = n1 - n2;
                                    break;
                                case '*':
                                    oResult.innerHTML = n1 * n2;
                                    break;
                                case '/':
                                    oResult.innerHTML = n1 / n2;
                                break;
                            }
                            oResult.innerHTML = '';
                            break;
                            case 'AC':
                                oResult.innerHTML='';
                                fu='';
                                num1='';
                                num2='';
                            break;
                            default:
                                if(fu==''){
                                    num1+=this.innerHTML;
                                    oResult.innerHTML=num1;
                                }else{
                                    num2+=this.innerHTML;
                                    oResult.innerHTML=num2;
                                }
                                break;

                    }
                }
            }



        </script>

</body>

</html>